<template>
  <div style="margin-bottom: 20px;">
    <el-dialog :title="audiVehicleTitle + edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag"
               width="1400px"  @open="handleOpenConfig" :before-close="handleClose">
      <!--车系-->
      <el-form label-width="110px" ref="audiVehicleEditFrom" class="mb20"
               :rules="audiVehicleEditRules" :model="audiVehicleData" :disabled="editAudiDisabled">
        <el-row>
          <el-col :span="8">
            <el-form-item label="车系编号" prop="no">
              <el-input type="text" :disabled="audiInputDisabled" clearable v-model="audiVehicleData.no" class="w184"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车系名称" prop="name">
              <el-input type="text" clearable v-model="audiVehicleData.name" class="w184"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属品牌" prop="brandName">
              <el-select v-model="audiVehicleData.brandName" class="w184" :disabled="audiInputDisabled"
                         filterable remote reserve-keyword placeholder="请输入关键词"
                         @change="selectCorp" :remote-method="getCorpList">
                <el-option v-for="item in brandNameList" :key="item.id" :label="item.name" :value="item.name"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--车型 table-->
      <div class="mb20" v-if="vehicleTableFlag">
        <div class="edit-table-header pad-t-b10">
          <span>车型数据</span>
          <!--<el-button type="primary" class="edit-add-position" :disabled="addBtnDisabled"  @click="addFlag=true,addClick()">新增</el-button>-->
        </div>
        <table class="add-edit-table">
          <!--表头-->
          <tr class="pad-t-b7">
            <th width="40">序号</th>
            <th width="">车型编号</th>
            <th width="">车型名称</th>
            <th width="">车型类型</th>
            <th width="">车辆长m</th>
            <th width="">车辆宽m</th>
            <th width="">车辆高m</th>
            <th width="">车辆自重</th>
            <th width="">车辆载重</th>
            <th width="">车厢长m</th>
            <th width="">车厢宽m</th>
            <th width="">车厢高m</th>
            <!--<th width="184">(可选)车辆照片</th>-->
            <th width="">车厢体积m³</th>
            <th width="">状态</th>
            <th width="300">操作</th>
          </tr>
          <!--暂无数据-->
          <tr v-if="!addFlag && paymentList.length === 0" class="ta-c pad15">
            <td colspan='15'>
              暂无数据
            </td>
          </tr>
          <!--编辑-->
          <tr v-else v-for="(item,index) in paymentList" :key="index">
            <td>{{index+1}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" :disabled="vehicleInputDisabled" v-model="item.no" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.no}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.name" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.name}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-select v-model="item.powerType" filterable remote reserve-keyword placeholder="请选择状态">
                <el-option key="1" label="电动" value="BLADE_ELECTRIC_VEHICLE"></el-option>
                <el-option key="2" label="混合动力" value="HYBRID_ELECTRICAL_VEHICLE"></el-option>
                <el-option key="3" label="燃油" value="GAS_VEHICLE"></el-option>
              </el-select>
            </td>
            <td v-else>{{item.powerType | powerTypeFilter}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.vehicleLength" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.vehicleLength}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.vehicleWidth" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.vehicleWidth}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.vehicleHeight" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.vehicleHeight}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.vehicleLoad" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.vehicleLoad}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.vehicleWeight" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.vehicleWeight}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.carriageLength" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.carriageLength}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.carriageWidth" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.carriageWidth}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" v-model="item.carriageHeight" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.carriageHeight}}</td>
            <!--<td v-if="editFlag && editIndex === index">-->
              <!--<el-input type="text" v-model="item.imageUrl" placeholder="请输入"></el-input>-->
            <!--</td>-->
            <!--<td v-else>{{item.imageUrl}}</td>-->
            <td v-if="editFlag && editIndex === index">
              <el-input type="text" disabled v-model="item.carriageVolume" placeholder="请输入"></el-input>
            </td>
            <td v-else>{{item.carriageVolume}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-select v-model="item.status" filterable remote reserve-keyword placeholder="请选择状态">
                <el-option key="1" label="正常" value="10"></el-option>
                <el-option key="2" label="禁用" value="40"></el-option>
              </el-select>
            </td>
            <td v-else>{{item.status | statusFilter}}</td>
            <td v-if="editFlag && editIndex === index">
              <el-button type="primary" @click="editFlag=false,editAddRow(index)">保存</el-button>
              <el-button type="primary" @click="editFlag=false">取消</el-button>
            </td>
            <td v-else>
              <el-button type="primary" :disabled="editVehicleDisabled" @click="editFlag=true,editAddInfo(index)">编辑</el-button>
              <el-button type="primary" :disabled="editBrandDisabled" @click="disablesBtn(index)">禁用</el-button>
              <el-button type="primary" :disabled="editBrandDisabled" @click="enableBtn(index)">启用</el-button>
              <el-button type="primary" :disabled="editVehicleDisabled" @click="editFlag=false,deleteAddInfo(index)">删除</el-button>
            </td>
          </tr>
          <!--新增-->
          <tr v-show="addFlag">
            <td>{{paymentList.length+1}}</td>
            <td>
              <el-input type="text" v-model="addObj.no" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input type="text" v-model="addObj.name" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-select v-model="addObj.powerType" filterable remote reserve-keyword placeholder="请选择状态">
                <el-option key="1" label="电动" value="BLADE_ELECTRIC_VEHICLE"></el-option>
                <el-option key="2" label="混合动力" value="HYBRID_ELECTRICAL_VEHICLE"></el-option>
                <el-option key="3" label="燃油" value="GAS_VEHICLE"></el-option>
              </el-select>
            </td>
            <td>
              <el-input type="text" v-model="addObj.vehicleLength" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input type="text" v-model="addObj.vehicleWidth" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input type="text" v-model="addObj.vehicleHeight" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input type="text" v-model="addObj.vehicleLoad" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input type="text" v-model="addObj.vehicleWeight" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input @input="calculationVolume" type="text" v-model="addObj.carriageLength" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input @input="calculationVolume" type="text" v-model="addObj.carriageWidth" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-input @input="calculationVolume" type="text" v-model="addObj.carriageHeight" placeholder="请输入"></el-input>
            </td>
            <!--<td>-->
              <!--<el-input type="text" v-model="addObj.imageUrl" placeholder="请输入"></el-input>-->
            <!--</td>-->
            <td>
              <el-input type="text" disabled v-model="addObj.carriageVolume" placeholder="请输入"></el-input>
            </td>
            <td>
              <el-select v-model="addObj.status" filterable remote reserve-keyword placeholder="请选择状态">
                <el-option key="1" label="正常" value="10"></el-option>
                <el-option key="2" label="禁用" value="40"></el-option>
              </el-select>
            </td>
            <td>
              <el-button type="primary" @click="addRow">保存</el-button>
              <!--<el-button type="primary" @click="addFlag=false,cancelRow">取消</el-button>-->
            </td>
          </tr>
        </table>
      </div>
      <!--按钮-->
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="handleClose">关闭</el-button>
        <el-button v-if="edit_main_title !== '查看'" type="primary" @click="confirmClick">提交</el-button>
      </el-row>
      <div style="height:20px"></div>
    </el-dialog>
  </div>
</template>

<script type="text/javascript">
  import * as CarDeployMgtAPI from '@/api/carDeploy'
  export default {
    name: '',
    components: {
    },
    props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'],
    data() {
      return {
        audiVehicleData: {
          no: '',
          brandName: '',
          brandNo: '',
          name: ''
        },
        audiVehicleEditRules: {
          no: [{ required: true, message: '请输入车系编码', trigger: 'change' }],
          brandName: [{ required: true, message: '请选择车型名称', trigger: 'change' }],
          name: [{ required: true, message: '请输入车系名称', trigger: 'change' }]
        },
        audiVehicleType: '', // 车系 或 车型
        audiVehicleTitle: '', // 车系 或 车型
        audiEditFlag: true, // 显示 车系 编辑面板
        vehicleTableFlag: true, // 显示车型table 编辑面板
        paymentList: [], // 车型列表数据
        addFlag: false, // 车型-新增
        editFlag: false, // 车型-编辑
        editIndex: -1,
        addObj: {
          no: '', // 编号
          name: '', // 名称
          powerType: 'GAS_VEHICLE', // 类型
          vehicleLength: '0', // 车辆长度
          vehicleWidth: '0', // 车辆宽度
          vehicleHeight: '0', // 车辆高度
          vehicleLoad: '0', // 车辆载重
          vehicleWeight: '0', // 车辆自重
          carriageLength: 0, // 车厢长度
          carriageWidth: 0, // 车厢宽度
          carriageHeight: 0, // 车厢高度
          status: '10', // 状态
          imageUrl: '',
          carriageVolume: 0 // 车厢体积
        }, // 新增对象
        brandNameList: [], // 品牌列表
        editBrandDisabled: false, // 品牌商面板禁用
        editVehicleDisabled: false, // 车型面板禁用
        audiInputDisabled: false, // 车系-input 禁用
        vehicleInputDisabled: false, // 车型-input 禁用
        editAudiDisabled: false // 车系面板禁用
      }
    },
    mounted() {
      this.getCorpList()
    },
    methods: {
      // 判断是否为 数值 类型
      typeOfNumberFunc(o) {
        const gettype = Object.prototype.toString
        return gettype.call(o * 1) === '[object Number]'
      },
      // 长 宽高 计算体积
      calculationVolume() {
        // console.log('calculationVolume() 值改变')
        if (this.typeOfNumberFunc(this.addObj.carriageLength) && this.typeOfNumberFunc(this.addObj.carriageWidth) && this.typeOfNumberFunc(this.addObj.carriageHeight)) {
          this.addObj.carriageVolume = (this.addObj.carriageLength * this.addObj.carriageWidth * this.addObj.carriageHeight).toFixed(3)
        }
      },
      // 禁用
      disablesBtn(index2) {
        const that = this
        that.paymentList.map((item, index) => {
          if (index === index2) {
            item.status = '40'
          }
        })
      },
      // 启用
      enableBtn(index2) {
        const that = this
        that.paymentList.map((item, index) => {
          if (index === index2) {
            item.status = '10'
          }
        })
      },
      // 获取 列表
      getCorpList(query) {
        const that = this
        CarDeployMgtAPI.brandInfoGetBrandsList({ corpName: query }).then(res => {
          that.brandNameList = res.data
        })
      },
      // 选择 设置名称导出
      selectCorp(value) {
        // console.log('selectCorp(value)', value)
        const that = this
        if (that.brandNameList) {
          that.brandNameList.map(item => {
            if (value === item.name) {
              that.audiVehicleData.brandNo = item.no
            }
          })
        }
      },
      // 弹窗页打开初始
      handleOpenConfig(data) {
        const that = this
        console.log(that.$props.edit_main_title, 'that.$props', that.$props.edit_select_row, that.$props.edit_params)
        const { no, name, brandName, brandNo, models } = that.$props.edit_select_row
        const { type } = that.$props.edit_params
        // 重置
        that.editBrandDisabled = false
        that.editVehicleDisabled = false
        that.editAudiDisabled = false
        that.audiInputDisabled = false
        that.vehicleInputDisabled = false
        that.audiVehicleData = {
          no: '',
          brandName: '',
          brandNo: '',
          name: ''
        }
        that.audiEditFlag = true // 车系面板 控制
        that.vehicleTableFlag = true // 车型面板 控制
        that.paymentList = []
        that.addFlag = true // 车型 新增模块
        that.editFlag = false // 车型 编辑模块
        that.editIndex = -1
        that.audiVehicleTitle = ''
        that.resetAddObj()
        // 车系 车型
        that.audiVehicleType = type
        if (type === 'audi') {
          that.audiVehicleTitle = '车系'
          that.audiEditFlag = true
          that.vehicleTableFlag = false
        } else if (type === 'Vehicle') {
          that.audiVehicleTitle = '车型'
          that.audiEditFlag = true
          that.vehicleTableFlag = true
        }
        // 查看 新增 编辑
        if (that.$props.edit_main_title === '新增') {
          //
        } else if (that.$props.edit_main_title === '编辑') {
          that.audiVehicleData = {
            no: no,
            brandName: brandName,
            brandNo: brandNo,
            name: name
          }
          that.paymentList = models
          if (type === 'audi') {
            that.editAudiDisabled = false
            that.audiInputDisabled = true
          } else if (type === 'Vehicle') {
            that.editAudiDisabled = true
            that.vehicleInputDisabled = true
          }
        } else if (that.$props.edit_main_title === '查看') {
          that.audiVehicleData = {
            no: no,
            brandName: brandName,
            brandNo: brandNo,
            name: name
          }
          that.paymentList = models
          that.addFlag = false
          that.editFlag = false
          that.editAudiDisabled = true
          that.editVehicleDisabled = true
        }
        // console.log('editFlag', that.editFlag, 'addFlag', that.addFlag)
      },
      // 编辑
      editAddInfo(index) {
        this.editIndex = index
      },
      // 删除
      deleteAddInfo(index) {
        this.paymentList.splice(index, 1)
      },
      // 编辑-保存
      editAddRow(index) {
        this.editIndex = index
        this.addFlag = true
        this.editFlag = false
      },
      // 新增
      addClick() {
        this.resetAddObj()
      },
      // 保存
      addRow(index) {
        if (this.checkAddObj(this.addObj)) {
          this.paymentList.push(this.addObj)
          this.resetAddObj()
        }
      },
      // 取消
      cancelRow(index) {
        this.addFlag = false
      },
      // 重置 addObj
      resetAddObj() {
        this.addObj = {
          no: '', // 编号
          name: '', // 名称
          powerType: 'GAS_VEHICLE', // 类型
          vehicleLength: '0', // 车辆长度
          vehicleWidth: '0', // 车辆宽度
          vehicleHeight: '0', // 车辆高度
          vehicleLoad: '0', // 车辆载重
          vehicleWeight: '0', // 车辆自重
          carriageLength: '0', // 车厢长度
          carriageWidth: '0', // 车厢宽度
          carriageHeight: '0', // 车厢高度
          status: '10', // 状态
          imageUrl: '',
          carriageVolume: '0' // 车厢体积
        }
      },
      confirmClick() {
        const that = this
        that.$refs['audiVehicleEditFrom'].validate((valid) => {
          if (valid) {
            if (that.$props.edit_main_title === '新增') {
              if (that.audiVehicleType === 'audi') {
                CarDeployMgtAPI.carSeriesAddCarSeries(that.audiVehicleData).then(res => {
                  that.$message({
                    message: that.audiVehicleTitle + '新增成功',
                    type: 'success',
                    duration: 2000
                  })
                  that.$emit('edit-confirm', false)
                }).catch(err => {
                  console.log('error', err)
                })
              }
            } else if (that.$props.edit_main_title === '编辑') {
              if (that.audiVehicleType === 'audi') {
                const toParams = {
                  id: that.$props.edit_select_row.id,
                  name: that.audiVehicleData.name
                }
                CarDeployMgtAPI.carSeriesUpdateById(toParams).then(res => {
                  that.$message({
                    message: that.audiVehicleTitle + '编辑成功',
                    type: 'success',
                    duration: 2000
                  })
                  that.$emit('edit-confirm', false)
                }).catch(err => {
                  console.log('error', err)
                })
              } else if (that.audiVehicleType === 'Vehicle') {
                if (that.paymentList.length > 0) {
                  that.audiVehicleData.models = that.paymentList
                  CarDeployMgtAPI.modelModelUpdate(that.audiVehicleData).then(res => {
                    that.$message({
                      message: that.audiVehicleTitle + '编辑成功',
                      type: 'success',
                      duration: 2000
                    })
                    that.$emit('edit-confirm', false)
                  }).catch(err => {
                    console.log('error', err)
                  })
                } else {
                  this.$message({
                    message: '请先添加车型数据',
                    type: 'warning',
                    duration: 2000
                  })
                }
              }
            }
          }
        })
      },
      handleClose() {
        this.$emit('edit-close', false)
      },
      // 检查 addObj
      checkAddObj(obj) {
        const { no, name, powerType, vehicleLength, vehicleWidth, vehicleHeight, vehicleLoad,
          vehicleWeight, carriageLength, carriageWidth, carriageHeight, carriageVolume } = obj
        if (no === '') {
          this.$message({
            message: '请先填写(车型编号)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (name === '') {
          this.$message({
            message: '请先填写(车型名称)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (powerType === '') {
          this.$message({
            message: '请先选择(类型)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (vehicleLength === '') {
          this.$message({
            message: '请先填写(车辆长度)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (vehicleWidth === '') {
          this.$message({
            message: '请先填写(车辆宽度)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (vehicleHeight === '') {
          this.$message({
            message: '请先填写(车辆高度)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (vehicleLoad === '') {
          this.$message({
            message: '请先填写(车辆载重)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (vehicleWeight === '') {
          this.$message({
            message: '请先填写(车辆自重)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (carriageLength === '') {
          this.$message({
            message: '请先填写(车厢长度)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (carriageWidth === '') {
          this.$message({
            message: '请先填写(车厢宽度)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (carriageHeight === '') {
          this.$message({
            message: '请先填写(车厢高度)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        if (carriageVolume === '') {
          this.$message({
            message: '请先填写(车厢体积)',
            type: 'warning',
            duration: 2000
          })
          return false
        }
        return true
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  /*common*/
  tr.pad-t-b7>th{
    padding-top: 7px;
    padding-bottom: 7px;
  }
  /*<!--table-->*/
  .add-edit-table {
    border-collapse:collapse;
    width: 100%;
    overflow-x: scroll;
  }
  .add-edit-table th{
    color:#878d99
  }
  .add-edit-table th,td{
    border: 1px solid #e6ebf5;
    text-align: center;
  }
  .position-input{
    width: 80px;
  }
  .edit-table-header{
    border-left: 1px solid #e6ebf5;
    border-top: 1px solid #e6ebf5;
    border-right: 1px solid #e6ebf5;
    box-sizing: content-box;
    padding-left: 6px;
  }
  .edit-add-position{
    padding: 2px 10px;
    margin-left: 6px;
  }
  /*<!--去掉 input 上下箭头按钮-->*/
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
</style>



